<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>192.168.2.100</title>
	<style>
		div{
			width: 300px;
			height: 200px;
			position: relative;
		}
		div:hover::before {
			content: '';
			width: 100%;
			height: 100%;
			display: block;
			border: 3px solid red;

			position: absolute;
			top: 0;
			left: 0;

			box-sizing: border-box;
		}
		img{
			width: 100%;
			height: 100%;
		}


	</style>
</head>

<body>

<h1>知识点: 伪元素, box-sizing: border-box </h1>

<div>
	<img src="http://attach.zhiyoo.com/forum/201902/28/115144thw1tklkqrlzqtcl.jpg">
</div>


</body>

</html>